<template>
  <div>
    <mt-spinner v-show="loading" style="margin: 0 auto;" color="#e72e0d" type="double-bounce"></mt-spinner>
    <div class="noticeSend">
      <div class="noticeSend-top clearfix">
        <textarea v-model="content" rows="5" cols="30" placeholder="请输入发送内容，不超过200字符。">
        </textarea>
        <mt-button :disabled="loading" @click.native="sendMessage()" class="submit-btn pull-right" type="danger">发送</mt-button>
      </div>
      <div class="noticeSend-list h5-hairline--top">
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <div v-for="(item, index) in siteDetailData.list" :key="index">
            <li v-if="item.senderAccount !== curUser" class="li-item clearfix">
              <div class="item-left pull-left">
                <p class="time">{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                <div class="cur-flex cur-align-center">
                  <img class="user-img" :src="item.avatar" alt="">
                  <span class="content">{{item.messageContent}}</span>
                </div>
              </div>
            </li>
            <li v-else class="li-item clearfix">
              <div class="item-right pull-right">
                <p class="time">{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                <div class="cur-flex cur-align-center cur-justify-end">
                  <span class="content">{{item.messageContent}}</span>
                  <img class="user-img" :src="item.avatar" alt="">
                </div>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
export default {
  data () {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 10,
      content: '',
      total: 0,
      siteDetailData: {
        list: []
      }
    }
  },
  computed: {
    curId () {
      return this.$route.query.id
    },
    curUser () {
      return this.$store.state.me.user.userAccount
    },
    curUserId () {
      return this.$store.state.me.user.userId
    }
  },
  created () {
    this.getSiteDetail()
  },
  methods: {
    async getSiteDetail (page) {
      try {
        this.loading = true
        if (!page) {
          page = this.pageNum
        }
        if (this.pageNum === 1) {
          this.siteDetailData.list = []
        }
        this.loading = true
        let res = await api.getSiteDetail({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          messageId: this.curId
        })
        this.siteDetailData.list = this.siteDetailData.list.concat(res.data.list)
        this.total = res.data.total
        this.pageNum = page
        this.loading = false
      } catch (e) {
        console.log(e)
      }
    },
    async sendMessage () {
      if (!this.content.length) {
        this.$toast('请输入内容')
        return false
      }
      if (this.content.length > 200) {
        this.$toast('内容不超过200字符！')
        return false
      }
      try {
        this.loading = true
        await api.sendMessage({
          receiverId: this.curUserId === this.siteDetailData.list[0].senderId ? this.siteDetailData.list[0].receiverId : this.siteDetailData.list[0].senderId,
          messageContent: this.content
        })
        this.content = ''
        this.$toast({
          message: '发送成功',
          iconClass: 'icon iconfont icon-check'
        })
        this.loading = false
        this.getSiteDetail()
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    loadMore () {
      if (!this.loading && this.total > this.siteDetailData.list.length) {
        this.loading = true
        let curPage = ++this.pageNum
        this.getSiteDetail(curPage)
      }
    }
  }
}
</script>
<style lang="scss">
.noticeSend {
  // min-height: 100%;
  padding: 26px;
  background-color: #fff;
  textarea {
    width: 100%;
    resize: none;
    padding: 16px;
    color: $text-color;
    border-color: $border-color;
  }
  .submit-btn {
    width: 130px;
    height: 48px;
    font-size: 20px;
    text-align: center;
    margin-top: 22px;
  }
  &-list {
    margin-top: 38px;
    padding-top: 22px;
  }
  .time {
    color: #9d9d9d;
    font-size: 20px;
  }
  .li-item {
    margin-bottom: 20px;
  }
  .user-img {
    width: 68px;
    height: 68px;
    display: inline-block;
    border-radius: 50%;
    background-color: $border-color;
  }
  .item-left .time {
    text-align: left;
  }
  .item-right .time {
    text-align: right;
  }
  .content {
    padding: 18px 22px;
    max-width: 86%;
    display: inline-block;
    border-radius: 8px;
  }
  .item-left .content {
    margin-left: 12px;
    background-color: #ededed;
  }
  .item-right .content {
    margin-right: 12px;
    background-color: #7de165;
  }
}
</style>
